<template>
    <h1>excel导出 <el-button @click="fileExport">导出文件</el-button></h1>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column prop="brand" label="品牌" width="180" />
        <el-table-column prop="category" label="分类" width="180" />
        <el-table-column prop="desc" label="描述" />
    </el-table>
</template>

<script>
import { proList } from "@/api/excel";
import ExportJsonExcel from "js-export-excel"

export default {
    data() {
        return {
            tableData: [],
        };
    },
    methods: {
        fileExport() {
            const option = {};

            // 配置 文件名
            // option.fileName = "excel";
            // option.datas = [
            //     // 每一个对象就是表格内的一个独立分页, 需要几个分页就书写几个对象
            //     {
            //         // 导出的源数据
            //         sheetData: [
            //             { one: "一行一列", two: "一行二列" },
            //             { one: "二行一列", two: "二行二列" },
            //         ],
            //         // 表格内分页的名字
            //         sheetName: "sheet",
            //         // 配置我们表格内每一列的数据字段名
            //         sheetFilter: ["two", "one"],
            //         // 配置表格中表头的内容
            //         sheetHeader: ["第一列", "第二列"],
            //         // 配置表格中每一列的宽度
            //         columnWidths: [20, 20],
            //     },
            //     {
            //         sheetData: [
            //             { one: "一行一列", two: "一行二列" },
            //             { one: "二行一列", two: "二行二列" },
            //         ],
            //     },
            // ];

            option.fileName = '商品数据'
            option.datas = [
                {
                    // 导出的源数据
                    sheetData: this.tableData,
                    // 表格内分页的名字
                    sheetName: "sheet",
                    // 配置我们表格内每一列的数据字段名
                    sheetFilter: ["brand", "category", 'proname', 'desc', 'img1'],
                    // 配置表格中表头的内容
                    sheetHeader: ["品牌", "分类", "商品名", "商品描述", "商品预览图链接"],
                    // 配置表格中每一列的宽度
                    columnWidths: [10, 100, 200, 50, 100],
                },
            ];

            const toExcel = new ExportJsonExcel(option); //new
            toExcel.saveExcel(); //保存
        },
    },
    async mounted() {
        const res = await proList();
        // console.log(res)
        this.tableData = res.data;
    },
};
</script>
